<template>
	<view class="showbutt">
		<van-button icon="share" round size='25px' @click='showshare'>132</van-button>
		
		<van-share-sheet
		  v-model:show="showShare"
		  title="立即分享给好友"
		  :options="options"
		/>
		
		<van-button icon="chat" round size='25px'>7</van-button>
		<van-button icon="goods-collect" round size='25px'>5427</van-button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	 const showShare = ref(false);
	 const options = [
	       [
	         { name: '微信', icon: 'wechat' },
	         { name: '朋友圈', icon: 'wechat-moments' },
	         { name: '微博', icon: 'weibo' },
	         { name: 'QQ', icon: 'qq' },
	       ],
	       [
	         { name: '复制链接', icon: 'link' },
	         { name: '分享海报', icon: 'poster' },
	         { name: '二维码', icon: 'qrcode' },
	         { name: '小程序码', icon: 'weapp-qrcode' },
	       ],
	     ];
		  const onSelect = (option) => {
		       showToast(option.name);
		       showShare.value = false;
		     };
		 // 点击展示分享面板
	let showshare = ()=>{
		showShare.value = true
	}
</script>

<style lang="scss" scoped>
	.showbutt{
		width: 720px;
		height: 70px;
		margin: 30px auto;
		// border: 1px solid black;
		.van-button{
			width: 30%;
			margin: 10px 10px;
			background: rgba(184,150,125, 0.3);
			color: white;
			border: 0px;
		}
		.van-button:nth-of-type(3){
			background: rgb(253,52,64);
		}
		
	}
</style>